<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>Document</title>


    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: 'f9658ed3f84f0763d2afd356a1ff6542',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=e94552d14a617c12cf98ea07b0d7b607"></script>
    <script src="./js/store.js"></script>
</head>

<body>
    <div id="container"></div>
    <div class="info">点击地图标热门地点</div>
    <script>
        var map = new AMap.Map('container', {
            center: [114.402672, 30.518937],
            zoom: 16,
            viewMode: '3D',
            pitch: 45,

        })
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.GeoJSON'],
                function() {
                    map.addControl(new AMap.ToolBar())
                    map.addControl(new AMap.Scale())
                    map.addControl(new AMap.ControlBar())
                })
            //定义一个全局变量，保存geojson
        var geojson = new AMap.GeoJSON({
                geoJSON: null,
            })
            //如果存在数据，那么导入数据
        if (JSON.stringify(getData()) != '[]') {
            //导入数据
            geojson.importData(getData())
        }
        console.log('geojson', geojson);
        map.add(geojson)

        //监听地图的点击事件
        map.on('click', function(e) {
            var marker = new AMap.Marker({
                    position: e.lnglat,
                })
                //通过geojson对象管理覆盖物
            geojson.addOverlay(marker)
            console.log('geojson', geojson); //点击后对比一下_overlays，_overlays存点击的点数据
            //保存数据(将geojson对象转换成标准的GeoJSON格式对象)
            saveData(geojson.toGeoJSON())
        })
    </script>
</body>

</html>